import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
    count: 1
}


/*
    mutations 可以理解为事件
    通过 store.commit('add') 这种形式来触发
    mutations 中的方法内容必须是同步的
*/
const mutations = {

    // 传递参数
    // 方法的第一个参数是state,就是定义的state,后面是传递的参数
    add(state,n){
        state.count += n;
    },
    reduce(state){
        state.count--;
    }
}

// 定义getters
const getters = {
    count: function(state){
        console.log("getters")
        state.count += 5;
        return state.count;
    }
}


/* 
    actions 可以异步执行的任务
    actions 可以理解成用来触发事件.
    actions中的方法可以是异步的
    使用 store.dispatch('addAction')来调用
*/
const actions = {

    // addAction 是异步方法名称
    // context 是上下文对象(整个store.js)
    // 在addAction 异步方法中调用了mutations中的方法
    addAction(context){
        context.commit('add',10);
        setTimeout(()=>{
            context.commit('reduce');
            console.log('setTimeout')
        },3000);
        console.log('addAction')
    },

    //这里的参数直接使用一个包含commit的对象
    reduceAction({commit}){
        commit('reduce');
        console.log('reduceAction')
    }
}

// 在导出的时候,要导出state, mutations, getters
export default new Vuex.Store({
    state: state,
    mutations: mutations,
    getters,
    actions
})